<template>
    <div class="pss-main-update-plan">
        <div class="pss-main-body" @click.stop="closePop"></div>
        <div class="pss-main-pop">
            <div class="pss-pop-top">
                <h3>修改定位计划</h3>
                <i class="el-icon-error" style="color: #FF524A;position:absolute;right: 20px;font-size: 20px" @click="closePop"></i>
            </div>
            <div>
                <el-form ref="form" :model="planForm" class="pss-plan-form" :inline="true" style="padding-top: 10px;height: 40px;">
                    <span class="form-label-name"><span style="color:red">*</span>定位计划名称</span>
                    <el-form-item>
                        <el-input v-model="planName" size="mini"></el-input>
                    </el-form-item>
                    <span class="form-label-name"><span style="color:red">*</span>定位起止日期</span>
                    <el-form-item class="pss-block" >
                        <el-date-picker
                            :picker-options="isDisabled"
                            v-model="starAndEndDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <el-form ref="form1"  class="pss-plan-form" >
                    <div  style="display: flex">
                        <span class="form-label-name"><span style="color:red">*</span>定位具体日期</span>
                        <el-form-item>
                            <div>
                                <el-radio-group v-model="weekOrMonth">
                                    <el-radio-button label="周"></el-radio-button>
                                    <el-radio-button label="月"></el-radio-button>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
                <el-form ref="form3"  class="pss-plan-form-active" style="padding-left: 133px;">
                    <el-form-item v-if="weekOrMonth == '周'">
                        <el-checkbox :indeterminate="weekIndeterminate" v-model="weekCheckAll" @change="weekDateChange">全选</el-checkbox>
                        <el-checkbox-group v-model="weekCheckedDate" @change="handleWeekDateChange">
                            <el-checkbox v-for="date in weekDateOptions" :label="date" :key="date">{{date}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item v-if="weekOrMonth == '月'">
                        <el-checkbox :indeterminate="monthIndeterminate" v-model="monthCheckAll" @change="monthDateChange">全选</el-checkbox>
                        <el-checkbox-group v-model="monthCheckedDate" @change="handleMonthDateChange">
                            <el-checkbox v-for="date in monthDateOptions" :label="date" :key="date">{{date}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
                <el-form ref="form4"  class="pss-plan-form">
                    <div  style="display: flex">
                        <span class="form-label-name"><span style="color:red">*</span>日定位时间段</span>
                        <el-form-item>
                            <el-time-picker
                                is-range
                                v-model="timeSlot"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                            </el-time-picker>
                        </el-form-item>
                    </div>
                </el-form>
                <el-form ref="form5"  class="pss-plan-form" >
                    <div  style="display: flex">
                        <span class="form-label-name"><span style="color:red">*</span>定位时间间隔</span>
                        <el-form-item>
                            <div>
                                <el-radio-group v-model="intervalType">
                                    <el-radio-button label="秒"></el-radio-button>
                                    <el-radio-button label="分"></el-radio-button>
                                    <el-radio-button label="时"></el-radio-button>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
                <el-form ref="form6"  class="pss-plan-form-active" style="padding-left: 133px;">
                    <el-form-item v-if="intervalType == '秒'">
                        <el-radio-group v-model="secondRadio">
                            <el-radio :label="'10'">10秒</el-radio>
                            <el-radio :label="'20'">20秒</el-radio>
                            <el-radio :label="'30'">30秒</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="intervalType == '分'">
                        <el-radio-group v-model="minuteRadio">
                            <el-radio :label="'1'">1分</el-radio>
                            <el-radio :label="'5'">5分</el-radio>
                            <el-radio :label="'10'">10分</el-radio>
                            <el-radio :label="'20'">20分</el-radio>
                            <el-radio :label="'30'">30分</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="intervalType == '时'">
                        <el-radio-group v-model="hourRadio">
                            <el-radio :label="'1'">1小时</el-radio>
                            <el-radio :label="'1.5'">1.5小时</el-radio>
                            <el-radio :label="'2'">2小时</el-radio>
                            <el-radio :label="'2.5'">2.5小时</el-radio>
                            <el-radio :label="'3'">3小时</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-form ref="form2"  class="pss-plan-form" style="padding:10px 30px 20px;text-align: center">
                    <el-form-item>
                        <el-button type="primary" @click="submit" size="mini">提交</el-button>
                        <el-button size="mini" @click="closePop">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import {dateFormat,chgStrToDate} from '@/base/utils.js'

const weekDateOptions = ['周一','周二','周三','周四','周五','周六','周日'];
const monthDateOptions = ['1号','2号','3号','4号','5号','6号','7号',
    '8号','9号','10号','11号','12号','13号','14号',
    '15号','16号','17号','18号','19号','20号','21号',
    '22号','23号','24号','25号','26号','27号','28号',
    '29号','30号','31号'];
export default {
    props:['updatePlan',"planInfo"],
    data(){
        return{
            planForm:{},
            planName:'',
            starAndEndDate:'',
            weekOrMonth:'周',
            intervalType:'秒',
            weekIndeterminate:false,
            weekCheckAll:false,
            weekDateOptions:weekDateOptions,
            weekCheckedDate:[],
            monthIndeterminate:false,
            monthCheckAll:false,
            monthDateOptions:monthDateOptions,
            monthCheckedDate:[],
            timeSlot:[new Date(), new Date().setHours(new Date().getHours()+1)],
            secondRadio:'',
            minuteRadio:'',
            hourRadio:'',
            isDisabled: {
                disabledDate(time) {
                    // 设置日期限制 小于某个日期不能选择
                    return time.getTime() < new Date().getTime() - 8.64e7;
                }
            }
        }
    },
    methods:{
        dealInfo(){
            this.planName = this.planInfo.planName;
            this.starAndEndDate = [new Date(chgStrToDate(this.planInfo.startDate)),new Date(chgStrToDate(this.planInfo.endDate))];
            this.weekOrMonth = this.planInfo.dateType == '1' ? '周':'月';
            this.weekCheckedDate = this.planInfo.dateType == '1' && this.planInfo.specificDate ? this.planInfo.specificDate.replace('1','周一').replace('2','周二').replace('3','周三').replace('4','周四')
                .replace('5','周五').replace('6','周六').replace('7','周日').split(',') : [];
            if (this.weekCheckedDate.length == this.weekDateOptions.length){
                this.weekCheckAll= true;
            }else if (this.weekCheckedDate.length>0){
                this.weekIndeterminate = true;
            }
            this.monthCheckedDate = this.planInfo.dateType == '1' ? [] : this.planInfo.specificDate.split(',');
            if (this.planInfo.dateType == '2'){
                this.monthCheckedDate = this.monthCheckedDate.map(item => {
                    return  item+'号';
                })
            }
            if (this.monthCheckedDate.length == this.monthDateOptions.length){
                this.monthCheckAll= true;
            }else if (this.monthCheckedDate.length>0){
                this.monthIndeterminate = true;
            }
            this.timeSlot = [new Date(dateFormat(new Date(),'yyyy/MM/dd')+' '+this.planInfo.startTime),new Date(dateFormat(new Date(),'yyyy/MM/dd')+' '+this.planInfo.endTime)];
            this.intervalType = this.planInfo.intervalType == '1' ? '秒' : this.planInfo.intervalType == '2' ? '分' : '时';
            if (this.planInfo.intervalType == '1'){
                this.secondRadio = this.planInfo.locateInterval;
            }else if (this.planInfo.intervalType == '2'){
                this.minuteRadio = this.planInfo.locateInterval;
            }else{
                this.hourRadio = this.planInfo.locateInterval;
            }
        },
        async submit() {
            if (this.planName != this.planInfo.planName){
                let judgeRes = await this.judgeNameRepeat(this.planName);
                if (judgeRes.data.retCode == '0') {
                    if (judgeRes.data.data == '1') {
                        this.$message({
                            message: judgeRes.data.retMsg,
                            type: 'warning'
                        });
                        return;
                    }
                } else {
                    return;
                }
            }
            let specificDate = [];
            this.monthCheckedDate.forEach(item => {
                specificDate.push(item.substring(0, item.length - 1))
            });
            let param = {
                planId: this.planInfo.planId,
                planName: this.planName,
                startDate: dateFormat(new Date(this.starAndEndDate[0]), 'yyyyMMdd'),
                endDate: dateFormat(new Date(this.starAndEndDate[1]), 'yyyyMMdd'),
                dateType: this.weekOrMonth == '周' ? '1' : '2',
                specificDate: this.weekOrMonth == '周'
                    ? this.weekCheckedDate.toString().replace('周一', '1').replace('周二', '2').replace('周三', '3').replace('周四', '4')
                        .replace('周五', '5').replace('周六', '6').replace('周日', '7')
                    : specificDate.toString(),
                startTime: dateFormat(this.timeSlot[0], 'hh:mm:ss'),
                endTime: dateFormat(new Date(this.timeSlot[1]), 'hh:mm:ss'),
                intervalType: this.intervalType == '秒' ? '1' : this.intervalType == '分' ? '2' : '3',
                locateInterval: this.intervalType == '秒' ? this.secondRadio : this.intervalType == '分' ? this.minuteRadio : this.hourRadio
            }
            if (param.planName == this.planInfo.planName && param.startDate == this.planInfo.startDate && param.endDate == this.planInfo.endDate
                && param.dateType == this.planInfo.dateType && param.specificDate.toString() == this.planInfo.specificDate.toString() && param.startTime == this.planInfo.startTime
                && param.endTime == this.planInfo.endTime && param.intervalType == this.planInfo.intervalType && param.locateInterval == this.planInfo.locateInterval){
                this.$message({
                    message: '未作修改，请勿提交',
                    type: 'warning'
                });
                return;
            }
            this.$http.post('/lbs/locatepeople/locatePlan/updateLocatePlan', param).then(res => {
                if (res.data.retCode == '0') {
                    this.$message({
                        message: res.data.retMsg,
                        type: 'success'
                    });
                    this.closePop();
                } else {
                    this.$message({
                        message: res.data.retMsg,
                        type: 'error'
                    });
                }
            })
        },
        weekDateChange(val) {
            this.weekCheckedDate = val ? weekDateOptions : [];
            this.weekIndeterminate = false;
        },
        handleWeekDateChange(value) {
            let checkedCount = value.length;
            this.weekCheckAll = checkedCount === this.weekDateOptions.length;
            this.weekIndeterminate = checkedCount > 0 && checkedCount < this.weekDateOptions.length;
        },
        monthDateChange(val) {
            this.monthCheckedDate = val ? monthDateOptions : [];
            this.monthIndeterminate = false;
        },
        handleMonthDateChange(value) {
            let checkedCount = value.length;
            this.monthCheckAll = checkedCount === this.monthDateOptions.length;
            this.monthIndeterminate = checkedCount > 0 && checkedCount < this.monthDateOptions.length;
        },
        closePop(){
            this.$emit('emClosePop');
            this.planName='';
            this.starAndEndDate='';
            this.weekOrMonth='周';
            this.intervalType='秒';
            this.weekIndeterminate=false;
            this.weekCheckAll=false;
            this.weekCheckedDate=[];
            this.monthIndeterminate=false
            this.monthCheckAll=false;
            this.monthCheckedDate=[];
            this.timeSlot=[new Date(), new Date().setHours(new Date().getHours()+1)];
            this.secondRadio='';
            this.minuteRadio='';
            this.hourRadio='';
        },
        judgeNameRepeat(planName){
            let param = {
                "planName": planName
            }
            this.$http.post('/lbs/locatepeople/locatePlan/judgePlanNameRepeat',param).then(res =>{
                if (res.data.retCode == '0') {
                    if (res.data.data == '1') {
                        this.repeatFlag = true;
                    }else{
                        this.repeatFlag = false;
                    }
                } else {
                    this.$message({
                        message: res.data.retMsg,
                        type: 'error'
                    });
                }
                return res;
            })
        }
    },
    watch:{
        updatePlan(val){
            if (val){
                this.dealInfo();
            }
        }
    }
}
</script>

<style scoped lang="less">
.pss-main-update-plan{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.pss-main-body{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background:#000000;
    opacity: 15%;
    z-index: 99;
}
.pss-main-pop{
    width: auto;
    height: auto;
    width: 700px;
    border-radius: 15px;
    background:#fff;
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.pss-pop-top{
    width: 100%;
    height: 60px;
    background: #F9F9F9;
    z-index: 101;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.pss-process{
    width: 100%;
    height: 60px;
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.pss-striping{
    width: 16%;height: 1px;background: #D1D1D1;
}
.pss-striping.blue{background: #007AFF;}
.el-icon-location.active{
    background: #007aff;
    font-size: 16px;
    padding: 4px;
    color: #fff;
    border-radius: 15px;
    margin-left: 5px;
}
.el-icon-check.active{
    background: #30B86B;
    font-size: 16px;
    padding: 4px;
    color: #fff;
    border-radius: 15px;
    margin-left: 5px;
    font-weight: 600;
}
.pss-icon-circle.active{
    background: #fff;
    height: 10px;
    width: 10px;
    border: 7px solid #D3D3D3;
    border-radius: 15px;
    margin-left: 5px;
}
.pss-process-txt{
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
}
.pss-base-info{
    font-size: 12px;
    color: #656565;
}
.pss-plan-form{
    padding: 0px 30px 15px;
}
.associates-box{
    height: 300px;
    width: 500px;
    margin: 20px 90px;
    background: #f7f7f7;
    overflow: auto;
    padding: 25px;
    box-sizing: border-box;
}
.form-label-name{
    font-size: 14px;
    line-height: 41px;
    padding-right: 7px;
    color: #606266;
}
</style>
<style lang="less">
.pss-main-update-plan {
    .el-input__inner {
        height: 24px;
        line-height: 24px;
    }
    .el-input {
        width: auto;
    }
    .pss-demonstration{
        font-size: 14px;
        color: #606266;
    }
    .el-date-editor .el-range__icon{
        line-height: 16px;
    }
    .el-date-editor .el-range-input, .el-date-editor .el-range-separator{
        font-size: 12px;
    }
    .el-date-editor .el-range-separator{
        line-height: 16px;
    }
    .el-date-editor .el-range__close-icon{
        line-height: 16px;
    }
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
        width: 220px;
    }
    .el-form-item{
        margin-bottom: 0;
    }
    .el-radio-button__inner{
        padding: 2px 5px;
        font-size: 12px;
    }
    .el-checkbox{
        margin-right: 15px;
    }
}
.pss-plan-form-active{
    .el-form-item__content{
        line-height: 25px;
    }
}
</style>
